<template>
  <div class="app-container home" ref="myHome">
    <div class="target-time">
      <el-date-picker v-model="targetTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
        @change="handleCommunityTime"></el-date-picker>
    </div>
    <div id="screenfull" @click="toggleScreenfull">
      <i class="iconfont icon-fullscreen"></i>
    </div>
    <!-- 顶部布局 -->
    <!-- <img class="top-title-bg" src="@/assets/images/home/topTitle.png" alt=""> -->
    <div class="top-title">{{ title }}"筑基行动"挂图作战{{ todayTime }}</div>
    <div class="layout-container">
      <div class="top-layout layout">
        <HomeTask :target-time="targetTime" />
      </div>
      <div class="main-layout">
        <!-- 左侧布局 营销业务统计-->
        <div class="left-layout">
          <!-- <HomeLeft /> -->
          <div class="left-layout-top layout">
            <HomeBottom @item-click="snailClick" :target-time="targetTime" />
          </div>
          <div class="left-layout-bottom layout">
            <HomeLeft />
          </div>

        </div>
        <!-- 中间布局 -->
        <div class="center-layout layout">
          <!-- 中间布局顶部 地图-->
          <HomeCenter :target-time="targetTime" />
        </div>
        <!-- 右侧布局 小区业务数据统计排名-->
        <div class="right-layout layout">
          <div class="right-layout-top">
            <HomeRight @item-click="snailClick" :target-time="targetTime"/>
          </div>
        </div>
      </div>
    </div>
    <el-dialog :visible.sync="dialogVisible" title="营业部详情" width="60%">
      <div class="scroll-shell">
        <div class="list">
          <div class="item"
            :class="{  'first-bgc': item.rank == 1,  'second-bgc': item.rank == 2,  'third-bgc': item.rank == 3}"
            v-for="(item, index) in tableData" :key="index">
            <div class="rank">
              <img style="width: 50px;" v-if="item.rank == 1" src="@/assets/images/home/medal1.png" alt="">
              <img style="width: 50px;" v-else-if="item.rank == 2" src="@/assets/images/home/medal2.png" alt="">
              <img style="width: 50px;" v-else-if="item.rank == 3" src="@/assets/images/home/medal3.png" alt="">
              <!-- <el-tag class="rank-num" v-else type="info" effect="dark"> {{ item.rank }}</el-tag> -->
              <div class="rank-bg" v-else>
                <div class="rank-num">
                  {{ item.rank }}
                </div>
              </div>
            </div>
            <div class="info">
              <div class="info-top">
                <div class="top-name"
                  :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                  <i class="iconfont icon-ic_person_card24px"></i>
                  {{ item.salesman }}
                </div>
                <div class="top-number"
                  :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                  {{ item.number }}</div>
              </div>
              <div class="info-bottom">
                <div class="info-item">
                  <div class="info-item-title">全量融合</div>
                  <div class="info-item-value"
                    :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                    {{ item.fullFusion }}</div>
                </div>
                <div class="info-item">
                  <div class="info-item-title">FTTR</div>
                  <div class="info-item-value"
                    :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                    {{ item.fttr }}</div>
                </div>
                <div class="info-item">
                  <div class="info-item-title">合计</div>
                  <div class="info-item-value"
                    :class="{  'first-color': item.rank == 1,  'second-color': item.rank == 2,  'third-color': item.rank == 3}">
                    {{ item.total }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Title from "./components/Title";
  import screenfull from "screenfull";
  import HomeTask from "./components/City/HomeTask";
  import HomeCenter from "./components/City/HomeCenter";
  import HomeLeft from "./components/City/HomeLeft";
  import HomeRight from "./components/City/HomeRight";
  import HomeBottom from "./components/City/HomeBottom";
  import { getDeptTree } from "@/api/system/user";
  import { developVolume } from "@/api/api";
  import store from "@/store";

  let baseUrl =
    location.protocol +
    "//" +
    location.hostname +
    (location.port ? ":" + location.port : "");
  export default {
    name: "Index",
    components: {
      Title,
      HomeTask,
      HomeCenter,
      HomeLeft,
      HomeRight,
      HomeBottom,
    },
    data() {
      return {
        title: "十里店营业部",
        // deptId: 219,
        deptId: store.state.user.deptId, //将缓存的用户id赋值给userId，用于查询营销人员
        todayTime: "",
        dialogVisible: false,
        tableData: [],
        targetTime: this.formatDate(),
      };
    },
    mounted() {
      //this.autoScroll();
      this.getDeptTree();
      this.getTodayTime();
    },
    methods: {
      formatDate(date = new Date()) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      },
      handleCommunityTime(time) {
        console.log(time)
        if (time === null || time === "") {
          this.getTodayTime()
        }
        else {
          this.todayTime = time.replace(/-/g, "/");
        }

      },
      snailClick(item) {
        developVolume({ deptId: item.deptId, targetTime:this.targetTime }).then((res) => {
          if (res.length !== 0) {
            this.tableData = [];
            // console.log(res);
            // this.tableData = res;
            res.forEach((item, index) => {
              this.tableData.push({
                rank: index + 1,
                salesman: item.salesman,
                number: item.number,
                fullFusion: item.fullFusion == ''? 0 : item.fullFusion,
                fttr: item.fttr == ''? 0 : item.fttr,
                total: item.total == ''? 0 : item.total,
              })
            });
            this.dialogVisible = true;
          }
          else {
            this.$message({
              message: '当前营业部无数据',
              type: 'error'
            });
          }
        });

      },
      toggleScreenfull() {
        // if (screenfull.enabled) {
        //   screenfull.toggle(document.getElementById("screenfull"));
        // }
        if (screenfull.isEnabled) {
          screenfull.toggle(this.$refs.myHome);
        }
      },
      getTodayTime() {
        var date = new Date();
        var year = date.getFullYear(); // 年份
        var month = date.getMonth() + 1; // 月份，返回值为0-11，所以需要加1
        var day = date.getDate(); // 日期

        // 对月份和日期进行补零
        month = month < 10 ? "0" + month : month.toString();
        day = day < 10 ? "0" + day : day.toString();

        this.todayTime = year + "/" + month + "/" + day;
      },
      getDeptTree() {
        getDeptTree({ deptId: this.deptId }).then((res) => {
          // console.log(res,'44444444444444444');
          this.title = res.data.deptName;
          // this.deptTree = res.data;
        });
      },
    },
  };
</script>

<style scoped lang="scss">
  @import "../assets/fonts/iconfont.css";

  .app-container {
    padding: 10px;
  }

  .home {
    width: 100%;
    height: calc(90vh);
    background: rgba(243, 242, 239, 1);
    background: url(../assets/images/home/bg2.png) rgba(243, 242, 239, 1) no-repeat center center;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    .target-time {
      position: absolute;
      top: 2.7%;
      right: 3%;
      z-index: 10;
    }

    #screenfull {
      position: absolute;
      top: 15px;
      right: 10px;
      z-index: 9999;
      cursor: pointer;

      .icon-fullscreen {
        font-size: 20px;
        color: #409eff;
      }
    }

    .layout {
      width: 100%;
      background: #fff;
      // border: 1px solid #ccc;
      box-sizing: border-box;
      border-radius: 4px;
      padding: 10px 18px;
      box-sizing: border-box;
    }

    .top-title-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: auto;
      z-index: 0;
    }

    .top-title {
      height: 5%;
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: 600;
      color: #409eff;
      // height: auto;
      font-family: PangMenZhengDao;
      writing-mode: horizontal-tb;
      filter: drop-shadow(rgba(0, 11, 27, 0.66) 1px 1px 6px) drop-shadow(rgb(95, 159, 255) 2px 1px 8px);
      color: rgb(255, 255, 255);
      word-spacing: 0px;
      letter-spacing: 4px;
      text-orientation: upright;
      user-select: text;
    }

    .layout-container {
      height: 94%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top-layout {
        width: 99%;
        height: 16%;
        margin: 0 auto;
        //margin-bottom: 16px;
      }

      .main-layout {
        width: 99%;
        margin: 0 auto;
        height: 83%;
        /* // flex-grow: 1; */
        display: flex;
        justify-content: space-between;
        flex-direction: row;

        // .filtr-selects {
        //   display: flex;
        //   justify-content: end;
        // }

        .left-layout {
          width: 43%;
          height: 97%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          // .bar-svg {
          //   height: calc(100% - 75px);
          //   display: flex;
          //   flex-direction: column;
          //   justify-content: space-around;

          //   .bar-svg-item {
          //     margin-top: 8px;
          //     border-bottom: 2px solid rgba(0, 0, 0, 0.4);

          //     .bar-svg-item-title {
          //       font-size: 18px;
          //       color: #aeaeb2;
          //     }

          //     .bar-svg-item-num {
          //       display: flex;
          //       font-size: 28px;
          //       line-height: 35px;
          //       color: #000;
          //       font-weight: 600;
          //     }
          //   }
          // }
          .left-layout-top {
            height: 78%;

          }

          .left-layout-bottom {
            height: 20%;
          }
        }

        .center-layout {
          width: 36%;
          height: 97%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .center-layout-top {
            height: 49%;

            .map-img {
              width: 100%;
              height: 100%;
            }
          }

          .center-layout-center {
            height: 49%;
            position: relative;
          }

          .center-layout-bottom {
            position: relative;
            height: 26%;

            .filter-selects-bottom {
              position: absolute;
              top: 6px;
              right: 20px;
              width: 36%;

              .bottom-selects {
                width: 25%;
              }
            }
          }
        }

        .right-layout {
          width: 20%;
          height: 97%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .right-layout-top {
            position: relative;
            height: 100%;
          }

          .right-layout-center {
            height: 10%;
          }

          .right-layout-bottom {
            height: 35%;
          }
        }
      }
    }
  }

  ::v-deep .el-table tr {
    background-color: #ecf5ff;
  }

  ::v-deep .el-table {
    background-color: #ecf5ff;
  }

  ::v-deep .el-slider__runway.disabled .el-slider__bar {
    background-color: #3e7af6 !important;
    cursor: default !important;
  }

  ::v-deep .el-slider__runway.disabled .el-slider__button {
    border-color: #3e7af6 !important;
    cursor: pointer !important;
  }

  ::v-deep .el-slider__runway.disabled .el-slider__button-wrapper:hover,
  .el-slider__runway.disabled .el-slider__button-wrapper.hover {
    cursor: default !important;
  }

  ::v-deep .el-select .el-input .el-select__caret {
    width: 12px;
  }

  ::v-deep .el-input--suffix .el-input__inner {
    padding-right: 15px;
  }

  ::v-deep .el-date-editor--daterange.el-input__inner {
    width: 226px;
  }

  ::v-deep .el-image__inner.el-image__preview {
    object-fit: inherit !important;
  }

  ::v-deep .el-table__cell {
    color: #000000;
    /* 设置字体颜色为绿色 */
    /* font-weight: 700; */
  }

  // 蓝色背景
  ::v-deep .el-progress--circle .el-progress__text {
    color: #fff;
  }

  ::v-deep .bar-svg-item-title {
    color: #333;
  }

  ::v-deep .bar-svg-item-num {
    color: #fff;
  }

  /*
@media screen and (max-width: 768px)  {

  .home{
    height: auto;
  }

  .main-layout{
    display: flex;
    flex-direction: column !important;
  }

  .top-layout{
    height: auto !important;
  }

  .left-layout{
    width: 100% !important;
  }

} */
</style>

<style scoped lang="scss">
  .scroll-shell {
    height: 750px;
    overflow: auto;
  }

  .list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    color: #303133;
  }

  .item {
    height: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: 1px solid #e6ebf5;
    border-radius: 4px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    overflow: hidden;

    .rank {
      width: 45px;
      height: 45px;
      margin-right: 10px;

      .rank-bg {
        position: absolute;
        top: -20px;
        left: -20px;
        width: 70px;
        height: 70px;
        background-color: #bbbbbb;
        font-size: 20px;
        border-radius: 23px;

        .rank-num {
          position: absolute;
          top: 30px;
          left: 35px;
          font-size: 28px;
          color: #fff;
        }
      }
    }

    .info {
      width: 70%;

      .info-top {
        display: flex;
        justify-content: space-around;
        align-items: center;

        .top-name {
          display: flex;
          align-items: center;
          font-size: 18px;
          font-weight: 600;

          .iconfont {
            font-size: 24px;
            color: #3dc8fd;
            margin-right: 10px;
            font-weight: 400;
          }
        }

        .top-number {
          font-size: 18px;
          font-weight: 600;
        }
      }

      .info-bottom {
        display: flex;
        justify-content: space-around;
        align-items: center;
        margin-top: 5px;

        .info-item {
          display: flex;
          flex-direction: column;
          align-items: center;
          font-size: 16px;

          .info-item-title {
            margin-top: 5px;
            color: #3dc8fd;
          }

          .info-item-value {
            margin-top: 5px;
            font-size: 20px;
          }
        }
      }
    }
  }

  .first-color {
    color: #fcb521;
  }

  .second-color {
    color: #98aabc;
  }

  .third-color {
    color: #dcac77;
  }

  .first-bgc {
    background-color: #fff9db;
  }

  .second-bgc {
    background-color: #ffebeb;
  }

  .third-bgc {
    background-color: #f8f0e0;
  }
</style>
